<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单选择</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<div class="layui-form " lay-filter="myForm">
    <div style="width:100%; ">
        <div style="display: inline-block; width: 90%; height: 400px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
            <ul id="menu-tree" class="demo-tree-more"></ul>
        </div>
    </div>
</div>
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script src="../../js/provider/my-utils.js" charset="utf-8"></script>
<script>
    layui.use(['tree', 'layer','form','table'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            tree = layui.tree;
        $.ajax({
            url: "/channel/sys-menu/menulist",
            type: 'POST',
            headers: {
                'Accept': 'application/json',
                'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('userdetail')).token
            },
            success: function (data) {
                var datalist = data;
                for (var o in datalist) {
                    datalist[o].name = datalist[o].title;
                    datalist[o].spread = true;
                }
                datalist = transData(data,"id","pid","children");
                // console.log("transData",datalist);
                tree.render({
                    elem: '#menu-tree' //指定元素
                    , data: datalist
                    ,isJump: false //是否允许点击节点时弹出新窗口跳转
                    ,showLine: false//是否开启连接线
                    ,onlyIconControl:true
                    ,click: function(obj) {
                        var clickdata = obj.data;  //获取当前点击的节点数据
                        // layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(clickdata));
                        localStorage.setItem("selector-menu-title",clickdata.title);
                        localStorage.setItem("selector-menu-id",clickdata.id);
                        localStorage.setItem("selector-menu-pid",clickdata.pid);

                        //var iframeIndex = parent.layer.getFrameIndex(window.name);
                        //parent.layer.close(iframeIndex);
                        $(".layui-tree-set").each(function (item, value) {//设置原选中的节点的背景色
                            $(this).find(".layui-tree-txt").eq(0).css({"background-color": "transparent"});
                        });
                        $(".layui-tree-set").each(function (item, value) {//设置原选中的节点的背景色
                            if($(this).attr("data-id")== clickdata.id) {
                                $(this).find(".layui-tree-txt").eq(0).css({"background-color":"#9acfea"});
                            }
                        });
                    }
                });
                var currentPid = localStorage.getItem("selector-menu-id");
                if(currentPid != null && currentPid != undefined) {
                    $(".layui-tree-set").each(function (item, value) {//设置原选中的节点的背景色
                        if($(this).attr("data-id")== currentPid) {
                            $(this).find(".layui-tree-txt").eq(0).css({"background-color":"#9acfea"});
                        }
                    });
                    localStorage.removeItem("selector-menu-id");
                }
            }, error: function (data) {
            }
        });

    });
    //递归方法
    function transData(json, idStr, pidStr, chindrenStr) {
        var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = json.length;
        for (; i < len; i++) {
            hash[json[i][id]] = json[i];
        }
        for (; j < len; j++) {
            var aVal = json[j], hashVP = hash[aVal[pid]];
            if (hashVP) {
                !hashVP[children] && (hashVP[children] = []);
                hashVP[children].push(aVal);
            } else {
                r.push(aVal);
            }
        }
        return r;
    }
</script>
</body>
</html>